<template>
  <div class="table-list-view" ref="tablesInfo">
    <el-table @row-click="rowClick" :data="tableData" stripe border :row-key="rowKey" :expand-row-keys="expandRowKeys" :height="(tableData != null && tableData.length) > 0 ? maxHeight : 350" @selection-change="handleSelectionChange">
      <!-- 勾选框 -->
      <el-table-column type="selection" width="60" v-if="tableConfig.isCheckBox" />
      <!-- 序列号 -->
      <el-table-column type="index" width="60" v-if="tableConfig.isShowIndex" />
      <el-table-column v-for="(item, index) in tableConfig.props" :key="index" :label="$t(item.label)" sortable :prop="item.prop" :width="item.width ? item.width : ''">
        <template slot-scope="scope">
          <div v-if="item.type == 'text'">
            {{ scope.row[item.prop] }}
          </div>

          <div v-if="item.type == 'state'" :style="'color:' + scope.row.color">
            {{ scope.row[item.prop] }}
          </div>
          <div v-if="item.type == 'text-btn'">
            <el-button type="text" size="small" @click="handleOpt(scope.row, item.callback)">{{ scope.row[item.prop] }} </el-button>
          </div>
          <div v-if="item.type == 'v-text'">
            <div v-html="scope.row[item.prop]"></div>
          </div>
          <div v-if="item.type == 'switch'">
            <el-switch v-model="scope.row[item.prop]" active-color="#13ce66" inactive-color="#999" @change="handleOpt(scope.row, item.callback)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="tableConfig.isOpt" :label="$t('global.operation')" :width="tableConfig.optWidth ? tableConfig.optWidth : 250">
        <template slot-scope="scope">
          <span v-for="(btn, index) in tableConfig.optBtns" :key="index">
            <el-button style="margin: 5px; padding: 5px" v-if="checkPerm(btn.code)" @click="handleOpt(scope.row, btn.callback)" type="text" size="mini">{{ $t(btn.label) }} </el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { checkPermission } from '@/common/utils/permission.js'

export default {
  data() {
    return {
      maxHeight: 0,
      expandRowKeys: [],
      multipleSelection: [],
    }
  },
  components: {},
  props: ['tableConfig', 'tableData'],
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.maxHeight = this.$refs.tablesInfo.clientHeight
      // console.log(this.maxHeight)
      // console.log(this.tableData,"呵呵")
    })
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    rowClick(row) {
      this.$emit('rowClick', row)
    },
    handleOpt(row, callback) {
      this.$emit(callback, row)
    },
    checkPerm(code) {
      return checkPermission(code)
    },
    rowKey(row) {
      return row.id
    },
    getCheckList() {
      return this.multipleSelection
    },
    expandTable(ids) {
      console.log(ids)
      this.expandRowKeys = ids
    },
  },
}
</script>

<style lang="scss" scoped>
.table-list-view {
  width: 100%;
  height: 100%;
  min-width: 800px;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
}
</style>
